/**
 * This JavaScript uses jQuery and the jQuery Flot graphing library to draw a
 * graph showing the hours billed by a particular employee aggregated on a
 * weekly basis.
 *
 * To improve the initial load time of the graph and spread server load, this
 * code uses AJAX to progressively load the data for the graph one week at a
 * time.
 */

// (these four values would be defined dynamically when the container page loads)
var uid = "21"; // System user-id of person
var uname = "Tim"; // Name of person
var expected = 40; // Expected hours worked per week

// URL to request to retrieve more data for the graph
var timegraph_url = "/index.php?page_info=timegraph_update";

var sum = 0; // Sum of hours graphed
var total = 0; // Total number of weeks graphed

// Data structure for the three series shown on the graph
var plotData = [
  {
    data: [],
    label: "   Time Logged (" + uname + ")"
  },
  {
    data: [],
    label: "   Overall Weekly Average"
  },
  {
    data: [],
    label: "   Expected Time"
  }
];

var axisData = [[]]; // X-axis labels
var curWeek = 0; // The most recent week currently shown on the graph
var weekMax = 12; // The number of weeks to show on the graph
var plot; // reference to the graph object

// Wrapper for telling the flot library to draw the graph
function replot() {
  plot = $.plot('#graph', plotData, {
    xaxis: { 
      ticks: axisData
    },
    yaxis: {
      min: 0,
      max: 80
    },
    series: {
      points: {show: true, fill: true},
      lines: {show: true, fill: false}
    }
  });
}

// Executes an AJAX request to retrive data for a particular week
// @param integer week The week number to compute the person's total hours for
//     0 is the current week, 1 is last week, etc.
// @param integer uid The system user-id of the person shown on the graph
// @param function cb Callback to execute when the AJAX query completes
function getDataForWeek(week, uid, cb) {
  $.ajax({
    url: timegraph_url,
    dataType: 'json',
    data: {
      week: week,
      uid: uid
    },
    cache: false,
    success: cb
  });
}

// Callback function for getting data for the next week
function poll() {
  getDataForWeek(curWeek, uid, update);
}

// Callback function to update the graph with another week's worth of data
// @param object data The data returned by the AJAX call to timegraph_url
function update(data) {
  curWeek++; // Advance to the next week
  
  // Compute the user's overall average for the period shown on the graph
  sum += data.value;
  total++;
  var avg = sum/total;
  
  // Fill in the data points on the "average" series line
  for(var key in plotData[1]['data']) {
    plotData[1]['data'][key][1] = avg;
  }
  
  // Push the retrieved data into the graph lines
  plotData[1]['data'].unshift([-1*data.week, avg]);
  plotData[0]['data'].unshift([-1*data.week, data.value]);
  plotData[2]['data'].unshift([-1*data.week, expected]);
  
  // Add a label for the new week
  axisData.unshift([-1*data.week, data.label]);
  
  // Update the graph
  replot();
  
  if(curWeek < weekMax) {
    // Fetch data for the next-oldest week in 500ms
    setTimeout(poll, 500);
  } else {
    // Give the user the option to show more data
    $("#showmore").show();
  }
}

// Event handler for the "show more" button
$("#showmore").bind('click', function() {
  $("#showmore").hide();
  
  // Kick off updates for 12 more weeks of data
  weekMax += 12;
  poll();
});

// Kick of the initial load of 12 weeks worth of data
poll();